<template>
	<!-- 电梯实时监控/多梯巡视监视详情 -->
	<vueScroll>
		<div class="operationBox heightMax publicboxNoPadding" v-loading='loading'>
			<div class="operationBoxLeft" v-for="(item,index) in liftAllList" :key='index' @dblclick="goDetail(item.id,item.register_code,item.button_display)">
				<div class="listName">
					<i></i><span class="font14">使用单位：{{item.property_company_name}}</span>
				</div>
				<div class="liftName">
					<h3 style="min-height: 20px;">{{item.internal_no}}</h3>
				</div>
				<div class="speBtn" style="margin-bottom: 5px;">
					<el-tooltip content="电梯内视频监控" placement="bottom" effect="light">
						<el-button class="font25" icon="sjicon-sidenav_monitoring" @click='lookVideo(item.surl)'></el-button>
					</el-tooltip>
					<el-tooltip content="体检报告" placement="bottom" effect="light">
						<el-button class="font25" icon="sjicon-guzhangzhenduan"></el-button>
					</el-tooltip>
					<el-tooltip content="分析诊断" placement="bottom" effect="light">
						<el-button class="font25" icon="sjicon-zhenduan" @click='goZhenDuan(item.id, item.register_code, item.installation_place, item.manufacturer_company_name,item.last_checkup_score,item.last_checkup_time)'></el-button>
					</el-tooltip>
					<el-tooltip content="设备状态" placement="bottom" effect="light">
						<el-button class="font25 shebeiS" icon="sjicon-equipment"></el-button>
					</el-tooltip>
				</div>
				<div class="liftBox">
					<div class="bgLift">
						<div class="lift-num">
							<div class="Num">
								{{item.cp ? item.cp : 0}}
								<img :class="['upOrDown',item.run_status == -1 ? ' transFormZ' : '']" src="../../../assets/liftImg/liftUpOrDwon.png"
								 alt="" v-show="item.run_status && item.run_status != 0">
							</div>
						</div>
						<div class="door" v-if="item.isShowAnimated">
							<img src="../../../assets/liftImg/leftDoor.jpg" alt="" :class="[item.is_open == 1? 'liftOpen' : 'liftClose' ]">
							<img src="../../../assets/liftImg/rightDoor.jpg" alt="" :class="[item.is_open == 1? 'liftOpen' : 'liftClose' ]">
						</div>
						<div class="door" v-if="item.is_open == 1&& !item.isShowAnimated">

						</div>
						<div class="door" v-if="item.is_open ==  0 && !item.isShowAnimated">
							<img src="../../../assets/liftImg/leftDoor.jpg" alt="">
							<img src="../../../assets/liftImg/rightDoor.jpg" alt="">
						</div>
					</div>
				</div>
				<!-- v-if="item.alarm.length == 0" -->
				<div class="listName listNmaTwo">
					<i></i><span class="font14">今日异常信号： 暂无异常信号</span>
				</div>
				<!-- 	<div class="allSignImg" v-if="item.alarm.length != 0">
					<div class="imgItem" v-for="(item,index) in item.alarm" :key='index'>
						<img :src="imgList[Number(item.code)-1].img" alt="">
						<el-tooltip class="item" effect="dark" :content="item.value" placement="top">
							<p>{{item.value}}</p>
						</el-tooltip>
					</div>
				</div> -->
			</div>
		</div>
			<videoControl v-if='videoShow' :dialogVisible='videoShow' @handleClose='handleClose'></videoControl>
	</vueScroll>
</template>

<script>
	import videoControl from '@/components/publicComponents/videoControl.vue'
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
	} from "@/common.js";
	export default {
		components:{
			videoControl
		},
		mounted() {
			this.getLiftList()
			this.getLiftUpOrDown()
		},
		data() {
			return {
				videoShow:false,
				marketingCode: '',
				facility: '',
				employ: '',
				infoFlag: true,
				imgList: [{
						img: require('../../../assets/allSign/sign1.png'),
						message: '轿厢报警按钮'
					},
					{
						img: require('../../../assets/allSign/sign2.png'),
						message: '电梯困人'
					},
					{
						img: require('../../../assets/allSign/sign3.png'),
						message: '非平层停梯'
					},
					{
						img: require('../../../assets/allSign/sign4.png'),
						message: '安全回路断路'
					},
					{
						img: require('../../../assets/allSign/sign5.png'),
						message: '轿厢冲顶'
					},
					{
						img: require('../../../assets/allSign/sign6.png'),
						message: '轿厢蹲底'
					},
					{
						img: require('../../../assets/allSign/sign7.png'),
						message: '开门走梯'
					},
					{
						img: require('../../../assets/allSign/sign8.png'),
						message: '电梯速度异常'
					},
					{
						img: require('../../../assets/allSign/sign9.png'),
						message: '电梯运行时安全回路断路'
					},
					{
						img: require('../../../assets/allSign/sign10.png'),
						message: '关门故障'
					},
					{
						img: require('../../../assets/allSign/sign11.png'),
						message: '开门故障'
					},
					{
						img: require('../../../assets/allSign/sign12.png'),
						message: '轿厢在开锁区域外停止'
					},
					{
						img: require('../../../assets/allSign/sign13.png'),
						message: '轿厢意外移动'
					},
					{
						img: require('../../../assets/allSign/sign14.png'),
						message: '电动机运转时间限制器动作'
					},
					{
						img: require('../../../assets/allSign/sign15.png'),
						message: '楼层位置丢失'
					},
					{
						img: require('../../../assets/allSign/sign16.png'),
						message: '其他阻止电梯再启动的故障'
					},
					{
						img: require('../../../assets/allSign/sign17.png'),
						message: '其它故障'
					},
				],
				liftAllList: [],
				facilityArr: [{
						value: 1,
						label: '在线'
					},
					{
						value: 2,
						label: '离线'
					},
				],
				loading: true
			}
		},
		computed: {
			liftsId() {
				if (localStorage.moreLiftIdList) {
					return JSON.parse(localStorage.moreLiftIdList).ids
				} else {
					return ''
				}
			}
		},
		methods: {
			lookVideo(url){
				if(url){
					this.videoShow = true
				}else{
					this.$message.info('暂无摄像头资源')
				}
			},
			handleClose(){
				this.videoShow = false
			},
			goZhenDuan(id, register_code, installation_place, manufacturer_company_name, last_checkup_score, last_checkup_time) {
				let obj = {
					newLabel: '电梯诊断分析详情',
					index: '/MainView/ElevatorStatistics/Diagnose'
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'Diagnose'
				})
				localStorage.diagnoseId = JSON.stringify({
					id: id
				})
				localStorage.diaRegister_code = JSON.stringify({
					name: register_code
				})
				localStorage.diaInstallation_place = JSON.stringify({
					name: installation_place
				})
				localStorage.diaProperty_company_name = JSON.stringify({
					name: manufacturer_company_name
				})
				localStorage.last_checkup_score = JSON.stringify({
					point: last_checkup_score
				})
				localStorage.last_checkup_time = JSON.stringify({
					time: last_checkup_time
				})
			},
			goDetail(id, register_code, button_display) {
				let obj = {
					newLabel: '运行实时监控详情',
					index: '/MainView/RealTimeElevatorMonitoring/MonitoringDetails',
				}
				localStorage.liftDetailId = JSON.stringify({
					id: id
				})
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'MonitoringDetails',
				})
				// if (register_code && button_display === '1') {
				// 	let data = {
				// 		register_code: register_code
				// 	}
				// 	axiosGet('/manu/elevator/request/', data, (res) => {
				// 		if (res.code == 0) {

				// 		} else {
				// 			this.$message.error(res.detail.result)
				// 		}
				// 	})
				// }
			},
			getLiftUpOrDown() {
				const timer = setInterval(() => {
					this.getLiftList()
				}, 2000)
				this.$once('hook:beforeDestroy', () => {
					clearInterval(timer);
				})
			},
			getLiftList() {
				let ids = this.liftsId.join(',')
				let params = {
					ids: ids
				}
				let url = '/manu/elevator/multi/'
				axiosGet(url, params, (res) => {
					this.loading = false
					if (res.code == 0) {
						if (this.liftAllList.length != 0) {
							this.liftAllList.map((item, index) => {
								if (item.is_open == res.detail[index].is_open) {
									item.isShowAnimated = 0
								} else {
									item.is_open = res.detail[index].is_open
									item.cp = res.detail[index].cp
									item.run_status = res.detail[index].run_status
									item.isShowAnimated = 1
								}
							})
						} else {
							this.liftAllList = res.detail
						}
						if (this.infoFlag) {
							if (this.liftAllList.length == 0) {
								this.$message({
									type: 'info',
									message: '多梯信息为空'
								})
							}
							this.infoFlag = false
						}
					} else {
						this.$message.error(res.detail.result)
					}
					console.log(res)
				})
			},
		},
	}
</script>

<style scoped lang="less">
	.colItem {
		display: flex;
		flex-direction: row;

		.searchCode {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 120px;
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		align-items: center;
		margin-bottom: 10px;
		margin-top: 5px;

		i {
			width: 3px;
			height: 15px;
			background: #2d8cf0;
			margin: 5px 5px;
		}
	}

	.operationBoxLeft {
		width: 32.5%;
		margin: 3px;
		background: #fff;
		box-sizing: border-box;
		height: 550px;

		.liftName {
			margin-bottom: 10px;
		}

		.liftBox {
			width: 100%;
			display: flex;
			justify-content: center;

			.bgLift {
				width: 213px;
				height: 330px;
				background: url(../../../assets/liftImg/lift.png) no-repeat 0 0;
				background-size: cover;
				position: relative;

				.lift-num {
					display: flex;
					width: 100%;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 17px;

					.Num {
						padding: 1px 25px;
						background: #000;
						color: #eee;
						font-family: Digital;
						position: relative;

						.upOrDown {
							position: absolute;
							right: 5px;
							top: 5PX;
							width: 10px;
						}
					}
				}

				.door {
					position: absolute;
					top: 48px;

					img {
						width: 42%;
						height: 270px;
					}

					img:first-child {
						transform-origin: left
					}

					img:last-child {
						transform-origin: right;
					}
				}
			}
		}
	}


	@keyframes openDoor {
		10% {
			transform: rotateY(20deg)
		}

		30% {
			transform: rotateY(40deg)
		}

		50% {
			transform: rotateY(60deg)
		}

		60% {
			transform: rotateY(80deg)
		}

		80% {
			transform: rotateY(90deg)
		}

		100% {
			transform: rotateY(90deg)
		}
	}

	@keyframes closeDoor {
		0% {
			transform: rotateY(90deg)
		}

		30% {
			transform: rotateY(80deg)
		}

		50% {
			transform: rotateY(60deg)
		}

		60% {
			transform: rotateY(40deg)
		}

		80% {
			transform: rotateY(20deg)
		}

		100% {
			transform: rotateY(0deg)
		}
	}

	.listNmaTwo {
		margin-bottom: 0;
		margin-top: 5px;
	}

	.operationBox {
		overflow-y: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.publicboxNoPadding {
		background: #E9EEF3;
	}

	.liftOpen {
		animation: openDoor 3s linear 1 forwards;
	}

	.liftClose {
		animation: closeDoor 3s linear 1 forwards;
	}

	.transFormZ {
		transform: rotateZ(180deg);
	}

	.allSignImg {
		display: flex;
		flex-wrap: wrap;
	}

	.imgItem {
		width: 20%;
		margin: 3px 0;

		p {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 14px;
		}
	}
</style>
